<template>
	<view>
		<uni-head title="我的理赔"></uni-head>
		<view style="height: 2upx; border-top:1px solid #EEEEEE ;"></view>
		<!-- 选项 -->
		<view class="marins" :style="'background-color: #F9F9F9;width:100%;position:fixed;z-index:999;top:'+80+'upx' ">
			<view class="option flex-space-between">
				<view class="item" @click="clickItem(index)" :style="num==index?'color:#5280F8;border-bottom: 2px solid #5280F8;':'border-bottom: 2px solid #F9F9F9;'" v-for="(item,index) in list" :key="index">{{item}}</view>
			</view>
		</view>
		<view style="height: 80rpx;"></view>
		
		<view class="listbox" v-for="(item,index) in initList" :key="index" >
			<view style="margin:0 20upx;" >
				<view class="topbox flex-space-between">
					<view class="left flex">
						<view class="imgbox flex-direction-column">
							<image src="../../static/Icon/naoz.png" mode=""></image>
						</view>
						<view class="time">{{item.create_time}}</view>
					</view>
					<view class="right">{{item.state==1?'已报案':item.state==2?'待上传':item.state==3?'材料审核':item.state==4?'材料邮寄':item.state==5?'已发件':item.state==6?'已完成':item.state==7?'审核拒绝':item.state==8?'上传拒绝':''}}</view>
				</view>
				<!-- // 1是查看与取消,7和1一样
				// ,2理赔上传和取消和8一样，上传驳回 2跳初始，8跳
				// ,3取消与查看,4和5去邮寄和地址,6是理赔结果, -->
				<view class="content">
					<view class="listname">事故者: {{item.insure}}</view>
					<view class="listtime">事故时间:{{item.cx_time}}</view>
					<view class="butbox" v-if="item.state==1||item.state==7">
						<view class="left" @click="reportcancel(item.id)">取消报案</view>
						<view class="right" @click="jieguoclick(item.id)" >查看结果</view>
					</view>
					
					<view class="butbox" v-if="item.state==2">
						<view class="left" @click="reportcancel(item.id)">取消报案</view>
						<view class="right" @click="scclick(item.id)">理赔上传</view>
					</view>
					
					<view class="butboxck" v-if="item.state==3||item.state==8">
						<view class="left" @click="reportcancel(item.id)">取消报案</view>
						<view class="right" @click="claimsclick(item.state,item.id)" >查看材料</view>
					</view>
					
					<view class="addressBox flex-space-between" v-if="item.state==4||item.state==5">
						<view class="left" @click="seeress">查看邮寄地址>></view>
						<view class="right" @click="gomail(item.id)">去邮寄</view>
					</view>
					<!-- v-if="item.state==6" -->
					<view class="butbox" v-if="item.state==6" >
						<view class="right" @click="resultclick(item.id)">理赔结果</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dixian" v-show="dixianShow">
			我可是有底线的哦~
		</view>
		<!-- 弹出层 -->
		<unipopup ref="popup" type="bottom" background-color="#fff">
			<view class="upopup">
				<view class="topbox">
					<view class="title flex-center">邮寄地址</view>
					<view class="quxiao" @click="addquxiao">
						<image src="../../static/Icon/cuo.png" mode=""></image>
					</view>
				</view>
				<view class="localization">
					<view class="namebox flex">
						<view class="name">{{address.name}}</view>
						<view class="phone">{{address.mobile}}</view>
					</view>
					<view class="dizhinfo">{{address.address}}</view>
				</view>
				<view class="butbox" @click="fuzclick">
					复制地址
				</view>
			</view>
		</unipopup>
	</view>
</template>

<script>
	import uniHead from "@/components/uni-dead/head.vue";
	import unipopup from '../../components/uni-popup/uni-popup.vue'
	import {setClipboardData,navTo,contentHight,showToast} from '../../utils/method.js'
	export default {
		components: { uniHead,unipopup },
		data() {
			return {
				list:['全部','已报案','材料预审中','邮寄材料','已完成'],
				num:0,
				heightHome:'',//tab高度
				isshow:false,
				dizhi:'123123',
				initList:[],//列表数据
				page:1,//当前页面
				state:0,//列表项
				last_page:'',//总共有多少页面
				dixianShow:false,//底部底线
				address:{},//收货地址
			}
		},
		onLoad() {
			this.reportindex()//初始数据
			this.ShippingAddress()
		},
		onReachBottom(){
		  console.log('触底');
		  if(this.page!=this.last_page){
			  this.page++
			  this.reportindex(1)
			  console.log('执行');
		  }else{
			  this.dixianShow=true
		  }
		},
		
		methods: {
			reportindex(info){
				if(info==1){
					this.ajax('report/index',{
						data:{
							state:this.state,
							page:this.page
						},
						success:(res)=>{
							console.log(res);
							this.initList=res.msg.data//列表数据
							this.page=res.msg.current_page//当前页面
							this.last_page=res.msg.last_page//总共有多少页面
							if(res.msg.data.length==0){
								this.initList=[]
							}else{
								res.msg.data.forEach((i)=>{
									this.initList.push(i)
								})
							}
							
						}
					})
				}else{
					this.ajax('report/index',{
						data:{
							state:this.state,
							page:this.page
						},
						success:(res)=>{
							console.log(res);
							this.initList=res.msg.data//列表数据
							this.page=res.msg.current_page//当前页面
							this.last_page=res.msg.last_page//总共有多少页面
							
						}
					})
				}
			},
			// 点击tab
			clickItem(index){
				this.num=index
				if(index==0){
					this.initList=[]
					console.log(this.initList);
					this.state=0
					this.page=1
					this.reportindex()
				}else if(index==1){
					this.initList=[]
					this.state=1
					this.page=1
					this.reportindex()
				}else if(index==2){
					this.initList=[]
					this.state=2
					this.page=1
					this.reportindex()
				}else if(index==3){
					this.initList=[]
					this.state=3
					this.page=1
					this.reportindex()
				}else if(index==4){
					this.initList=[]
					this.state=4
					this.page=1
					this.reportindex()
				}
			},
			seeress(){
				this.$refs.popup.open('top')
			},
			//取消添加
			addquxiao(){
				 this.$refs.popup.close()
			},
			// 点击复制
			fuzclick(){
				setClipboardData(this.address.address)
			},
			
			// 去邮寄
			gomail(id){
				navTo('/pages/order/Lpinfo?id='+id)
			},
			// 完成查看结果
			resultclick(id){
				navTo('/pages/order/resultlp?id='+id)
			},
			// 收货地址
			ShippingAddress(){
				this.ajax('report/getAddress',{
					data:{},
					success:(res)=>{
						this.address=res.msg
						console.log(res);
					}
				})
			},
			// 取消报案
			reportcancel(id){
				this.ajax('report/cancel',{
					data:{
						id
					},
					success:(res)=>{
						if(res.code==1){
							showToast('取消成功')
						}
						 this.reportindex(1)
						console.log(res);
					}
				})
			},
			
			// 上传
			scclick(id){
				// 如果没有传show是正常上传状态，传了show就是修改状态
				let obj ={
					id,
				}
				navTo('/pages/order/upfile?obj='+JSON.stringify(obj))
			},
			// 查看上传
			claimsclick(state,id){
				if(state==3){
					// 审核中
					navTo('/components/examine/examine?id='+id)	
				}else if(state==8){
					// 审核失败
					navTo('/pages/order/notongg?id='+id)	
				}	
			},
			// 查看报案结果
			jieguoclick(id){
				let obj={
					resid:id,
					id:1
				}
				navTo('/pages/order/result?id='+JSON.stringify(obj))
			}
		},
	}
	// 1是查看与取消,7和1一样
	// ,2理赔上传和取消和8一样，上传驳回 2跳初始，8跳
	// ,3取消与查看,4和5去邮寄和地址,6是理赔结果,
</script>

<style lang="less" scoped>
.marins{
	position: fixed;
	// top: 130rpx;
	left: 0;
	height: 75rpx;
	z-index: 0;
	width: 100%;
	padding-top: 20rpx;
	background-color: #fff;
	border-bottom:1px solid #eeeeee ;
	.option{
		margin:0 26rpx;
		.item{
			color: #333333;
			font-size: 32rpx;
			border-bottom: 2px solid #fff;
			padding-bottom: 24rpx;
		}
	}
}
.listbox{
	margin:20upx 24upx 0 ;
	border-radius: 10upx;
	background-color: #fff;
	.topbox{
		padding: 20upx 0;
		border-bottom: 1px solid #eeeeee;
		.left{
			.imgbox{
				width: 24upx;
				height: 24upx;
				// margin-bottom: 16upx;
				margin-right: 6upx;
				image{
					width: 24upx;
					height: 24upx;
				}
			}
			.time{
				font-size: 26upx;
				color: #999999;
			}
		}
		.right{
			font-size: 28upx;
			color: #F95D4A;
		}
	}
	.content{
		.listname{
			margin: 26upx 0 16upx;
			font-size: 28upx;
			color: #000000;
		}
		.listtime{
			font-size: 24upx;
			color: #999999;
		}
		.butbox{
			padding-top:10upx ;
			padding-bottom: 24upx;
			display: flex;
			justify-content: flex-end;
			.left,.right{
				width: 152upx;
				height: 56upx;
				text-align: center;
				font-size: 28upx;
				line-height:56upx ;
				border-radius: 10upx;
			}
			.left{
				border: 1px solid #5280F8;
				color: #5280F8;
				background-color: #fff;
			}
			.right{
				width: 152upx;
				height: 60upx;
				line-height:60upx ;
				background: linear-gradient(180deg, #4EA5FD 0%, #5280F8 100%);
				color: #fff;
				margin-left: 30upx;
			}
		}
		.butboxck{
			padding-top:10upx ;
			padding-bottom: 24upx;
			display: flex;
			justify-content: flex-end;
			.left,.right{
				width: 152upx;
				height: 56upx;
				text-align: center;
				font-size: 28upx;
				line-height:56upx ;
				border-radius: 10upx;
				border: 1px solid #5280F8;
				color: #5280F8;
				background-color: #fff;
			}
			.left{
				border: 1px solid #5280F8;
				color: #5280F8;
				background-color: #fff;
			}
			.right{
				border: 1px solid #5280F8;
				color: #5280F8;
				background-color: #fff;
				margin-left: 30upx;
			}
		}
		.addressBox{
			padding-bottom: 24upx;
			.left{
				color: #5280F8;
				font-size: 24upx;
			}
			.right{
				width: 152upx;
				height: 60upx;
				background: linear-gradient(180deg, #4EA5FD 0%, #5280F8 100%);
				color: #fff;
				text-align: center;
				font-size: 28upx;
				line-height:60upx ;
				border-radius: 10upx;
			}
		}
	}
}
.upopup{
	padding-bottom: 50upx;
	background-color: #fff;
	.topbox{
		padding: 26upx 0;
		position: relative;
		background-color: #F9F9F9;
		.title{
			color: #000000;
			font-size: 36upx;
		}
		.quxiao{
			width: 24upx;
			height: 24upx;
			position: absolute;
			top: 28upx;
			right: 50upx;
			image{
				width: 24upx;
				height: 24upx;
			}
		}
	}
	.localization{
		margin:0 24upx;
		// padding-bottom: 30upx;
		background-color: #fff;
		.namebox{
			margin-top: 66upx;
			color: #000000;
			font-size: 32upx;
			.phone{
				margin-left: 20upx;
			}
		}
		.dizhinfo{
			margin-top: 26upx;
			font-size: 28upx;
			color: #999999;
		}
	}
	.butbox{
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		margin: 0 24upx ;
		border-radius: 10upx;
		padding-bottom: ;
		// margin-bottom: 38upx;
		margin-top: 66upx;
		font-size: 32upx;
		color: #fff;
		background: linear-gradient(180deg, #4EB4FE 0%, #5280F8 100%);
	}
}
.dixian{
	height: 50upx;
	color: #777777;
	line-height: 50upx;
	text-align: center;
}
</style>
